@import "@common/styles/index.scss";

:global {
  .normal-badge {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .badge__circle {
      position: absolute;
      top: -8px;
      right: -8px;
      width: rem(17px);
      height: rem(17px);
      font-size: 12px;
      line-height: 18px;
      text-align: center;
      color: $white !important;
      background: $error-color !important;
      border-radius: 50%;
    }
  }

  .middle-badge {
    .badge__circle {
      right: -18px;
      width: rem(26px);
      border-radius: 8px/50%;
    }
  }

  .large-badge {
    .badge__circle {
      right: -28px;
      width: rem(36px);
      border-radius: 8px/50%;
    }
  }

  /* 修饰红点定位 */
  .text-badge {
    .badge__circle {
      top: -4px;
    }
  }

  .avatar-badge {
    width: 38px;
    height: 38px;
    .badge__circle {
      top: 0;
    }
    &.middle-badge {
      .badge__circle {
        right: -12px;
      }
    }
    &.large-badge {
      .badge__circle {
        right: -12px;
      }
    }
  }
}
